<template>
    <div>
        <h3>ID:{{$route.params.id}}</h3>
        <ul>
            <li>id:{{oneMessageDetail.id}}</li>
            <li>title:{{oneMessageDetail.title}}</li>
            <li>content:{{oneMessageDetail.content}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "MessageDetail",
        data(){
            return {
                oneMessageDetail:{}
            }
        },
        mounted() {
            setTimeout(()=>{
                const allMessageDetail = [
                    {id:1,title:'title1',content:'this is content1'},
                    {id:2,title:'title2',content:'this is content2'},
                    {id:3,title:'title3',content:'this is content3'},
                ];
                const id = this.$route.params.id*1;
                this.allMessageDetail = allMessageDetail;
                this.oneMessageDetail = allMessageDetail.find(detail => detail.id === id)
            },1000)
        },
        watch:{
            $route:function (value) { //这个value是最新的$route
                //更新组件
                const id = value.params.id*1;
                this.oneMessageDetail = this.allMessageDetail.find(detail => detail.id === id)
            }
        }
    }
</script>

<style scoped>

</style>